/**
 * Created by xxx on 2017/3/28.
 */

//所有组件嵌套
var Main = React.createClass({
    //文本框失去焦点事件
    onUserBlur: function (e) {
        //TODO 处理相关验证任务
        var val = $("#userName").val();
        if(val == ""){
            suixun.alert("用户名不能为空!");
            $("#userPhone").show();
            return
        }else{
            $("#userPhone").hide();
        }
    },
    //密码框失去焦点事件
    onPwdBlur: function (e) {
        //TODO 处理相关验证任务
        var val = $("#userPwd").val();
        if(val == ""){
            suixun.alert("密码不能为空!");
            $("#userPassword").show();
            return;
        }else if(!/^[^\u4e00-\u9fa5]{0,}$/.test(val)){
            suixun.alert("密码格式错误!");
            $("#userPassword").show();
        }else if(val.length < 6 && val.length > 20){
            suixun.alert("密码为6-20为字符!");
            $("#userPassword").show();
            return false;
        }else{
            $("#userPassword").hide();
        }
    },
    //a标签的点击事件
    aHrefClick: function () {
        window.location = 'lostPassword.html';
    },
    render: function () {
        return (
            <div className="l_login">
                <header>
                    <div id="time">
                    </div>
                </header>
                <div className="main">
                    <div className="main-middle">
                        <div className="main-left">
                            <img src="../img/image/login_middle.png" />
                        </div>
                        <div className="main-right">
                            <div className="main-right-title">
                                <span><img  src="../img/image/logo.png" /></span>
                            </div>
                            <div className='main-right-username'>
                                <span className="span-img"><img src='../img/icon/user.png' /></span>
                                <input type='text' placeholder='请输入账号'  ref='userName' id='userName' name='userName' maxLength="20" onBlur={this.onUserBlur}/>
                                <div id='userPhone' className="errorMsg" ></div>
                            </div>
                            <div className='main-right-password '>
                                <span className="span-img"><img src='../img/icon/password.png' /></span>
                                <input type='password'  placeholder='请输入密码'  ref='userPwd' id='userPwd' name='userPwd' maxLength="20" onBlur={this.onPwdBlur}/>
                                <div id='userPassword' className="errorMsg" ></div>
                            </div>
                            <div className="main-right-button">
                                <div id="chickLogin" onClick={login}>登录</div>
                            </div>
                            <div className='main-right-forgetPassword'><a onClick={this.aHrefClick} style={{fontSize:'14px'}}>忘记密码？</a> </div>
                        </div>
                    </div>
                </div>
                <footer>
                    <div className="copyright">
                        <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                    </div>
                    <div className="footer-rail above"></div>
                    <div className="footer-rail below"></div>
                </footer>
            </div>
        );
    }
});
ReactDOM.render(
    <Main  />,
    document.getElementById('login')
);
//绑定回车时间
$(document).keypress(function(e) {
    var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
    if (eCode == 13){
        login();
    }
});
//登录
function login(){
    if($(".popupFrame").height() > 0){
        return;
    }
    var userName = $("input[type='text']").val(),userPwd = $("input[type='password']").val();
    if(userName == ""){
        suixun.alert("用户名不能为空!");
        $("#userPhone").show();
        return;
    }else{
        $("#userPhone").hide();
    }
    if(userPwd == ""){
        suixun.alert("密码不能为空!");
        $("#userPassword").show();
        return;
    }else{
        $("#userPassword").hide();
    }
    if($("#chickLogin").html() == "登录"){
        $("#chickLogin").html("登录中...");
        suixun.ajax(serverUrl+'/userManager/loginService.json','param={"account":"'+userName+'","password":"'+userPwd+'"}',"get",function(data){
            if(data.code==200){
                localStorage.userName = userName;
                localStorage.userId = data.info.id;
                window.location.href="../main/main.html";
            }else{
                $("#chickLogin").html("登录");
                suixun.alert(data.msg);
            }
        });
    }
}
